<template>
  <div class="Register">
    <!-- <div class="banner">
      <el-card>
        <el-tabs :tab-position="'left'" style="height: 200px;">
          <el-tab-pane label="用户管理">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-card>
    </div>-->
    <div class="top">
      <div class="topBanner">
        <p class="title">完成注册需要几个简单的步骤</p>
        <el-steps :active="activeName-0" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="用户头像"></el-step>
          <el-step title="兴趣爱好"></el-step>
          <el-step title="项目经历"></el-step>
          <el-step title="注册成功"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="bod">
      <el-card>
        <el-form
          :model="registerForm"
          status-icon
          :rules="registerRules"
          ref="registerRef"
          label-width="100px"
        >
          <el-tabs :tab-position="'left'" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="0">
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="registerForm.username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱:" prop="email">
                <el-input v-model="registerForm.email"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input v-model="registerForm.password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="repassword">
                <el-input v-model="registerForm.repassword"></el-input>
              </el-form-item>
              <el-form-item label="年龄:" prop="age">
                <el-input v-model="registerForm.age"></el-input>
              </el-form-item>
              <el-form-item label="性别:" prop="sex">
                <el-radio v-model="registerForm.sex" label="1">男</el-radio>
                <el-radio v-model="registerForm.sex" label="2">女</el-radio>
              </el-form-item>

              <el-form-item label="毕业学校:" prop="education">
                <el-input v-model="registerForm.education"></el-input>
              </el-form-item>
              <el-form-item label="已婚/对象:" prop="sexOrFriends">
                <el-radio v-model="registerForm.sexOrFriends" label="1">是</el-radio>
                <el-radio v-model="registerForm.sexOrFriends" label="2">否</el-radio>
              </el-form-item>
              <!-- <el-form-item>
                <el-button type="primary" @click="submitRegisterForm()">提交</el-button>
                <el-button>重置</el-button>
              </el-form-item>-->
            </el-tab-pane>
            <el-tab-pane label="用户头像" name="1">
              <el-card>
                <el-row>
                  <el-col>
                    <el-alert title="请上传真实的个人头像" type="warning" center show-icon :closable="false"></el-alert>
                  </el-col>
                </el-row>
                <el-row class="upload">
                  <el-col>
                    <el-upload
                      class="upload-demo"
                      action="/api/upload/upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      list-type="picture"
                      :limit="'1'-0"
                      :on-success="seccessAfter"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </el-col>
                </el-row>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="兴趣爱好" name="2">
              <el-row class="projectCLA">
                <el-col>
                  <el-alert title="可选项内容，请认真填写" type="warning" center show-icon :closable="false"></el-alert>
                </el-col>
              </el-row>
              <el-form-item label="个人兴趣：">
                <el-checkbox-group v-model="registerForm.hobbies">
                  <el-checkbox label="看书" name="Vue.js"></el-checkbox>
                  <el-checkbox label="撩妹" name="撩妹"></el-checkbox>
                  <el-checkbox label="打球" name="打球"></el-checkbox>
                  <el-checkbox label="看电影" name="看电影"></el-checkbox>
                  <el-checkbox label="编程" name="编程"></el-checkbox>
                  <el-checkbox label="动漫" name="动漫"></el-checkbox>
                  <el-checkbox label="其它" name="其它"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="是否宅男：">
                <el-radio v-model="registerForm.isZainan" label="1">是</el-radio>
                <el-radio v-model="registerForm.isZainan" label="2">否</el-radio>
              </el-form-item>
              <el-form-item label="接受异性交友">
                <el-radio v-model="registerForm.appointment" label="1">是</el-radio>
                <el-radio v-model="registerForm.appointment" label="2">否</el-radio>
              </el-form-item>
              <el-form-item label="喜欢的网游">
                <el-checkbox-group v-model="registerForm.game">
                  <el-checkbox label="LOL" name="LOL"></el-checkbox>
                  <el-checkbox label="DNF" name="DNF"></el-checkbox>
                  <el-checkbox label="仙剑情缘" name="仙剑情缘"></el-checkbox>
                  <el-checkbox label="吃鸡" name="吃鸡"></el-checkbox>
                  <el-checkbox label="斗地主" name="斗地主"></el-checkbox>
                  <el-checkbox label="守望先锋" name="守望先锋"></el-checkbox>
                  <el-checkbox label="其它" name="其它"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="其它兴趣介绍:">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入您的兴趣爱好描述"
                  v-model="registerForm.hobbiesInfo"
                  size="medium"
                ></el-input>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="项目经历" name="3">
              <el-row class="projectCLA">
                <el-col>
                  <el-alert title="可选项内容，请认真填写" type="warning" center show-icon :closable="false"></el-alert>
                </el-col>
              </el-row>
              <el-form-item label="项目名称:" prop="projectName">
                <el-input v-model="registerForm.projectName"></el-input>
              </el-form-item>
              <el-form-item label="开发周期:">
                <el-date-picker
                  v-model="registerForm.projectTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="技术选型:">
                <el-checkbox-group v-model="registerForm.projectRemark">
                  <el-checkbox label="Vue.js" name="Vue.js"></el-checkbox>
                  <el-checkbox label="Node.js/PHP" name="Node.js/PHP"></el-checkbox>
                  <el-checkbox label="Mongodb/Sql" name="Mongodb/Sql"></el-checkbox>
                  <el-checkbox label="Java" name="Java"></el-checkbox>
                  <el-checkbox label="C++" name="C++"></el-checkbox>
                  <el-checkbox label="其它" name="其它"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="项目介绍:">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="registerForm.projectContent"
                  size="medium"
                ></el-input>
              </el-form-item>
              <el-form-item label="在线演示地址:">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="如无则不用填写"
                  v-model="registerForm.prodectAddress"
                  size="medium"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitRegisterForm()">提交</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-card>
      <!-- 图片预览模态框 -->
      <el-dialog title="提示" :visible.sync="imgVisibel" width="50%">
        <img class="imgV" :src="imgUrl" alt="图片不见了" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Register',
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      setTimeout(() => {
        if (value < 18) {
          callback(new Error('请输入合适年纪'))
        } else {
          callback()
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.password !== '') {
          this.$refs.registerRef.validateField('repassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      activeName: '0',
      registerForm: {
        username: '',
        password: '',
        repassword: '',
        email: '',
        age: '',
        sex: '',
        education: '',
        sexOrFriends: '',
        projectName: '',
        projectTime: '',
        projectRemark: [],
        projectContent: '',
        prodectAddress: '',
        hobbies: [],
        isZainan: '',
        appointment: '',
        game: [],
        hobbiesInfo: '',
        avater: ''
      },
      fileList: [],
      imgVisibel: false,
      imgUrl: '',
      registerRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        email: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        age: [{ validator: checkAge, trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        education: [
          { required: true, message: '请输入毕业学校', trigger: 'blur' }
        ],
        sexOrFriends: [
          { required: true, message: '请输入关键东西', trigger: 'blur' }
        ],
        password: [{ validator: validatePass, trigger: 'blur' }],
        repassword: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  // created() {
  //   this.$axios.get('/api/upload/test').then(result => {
  //     console.log(result)
  //   })
  // },
  methods: {
    handleClick(e) {
      this.activeName = e.name
    },
    submitRegisterForm() {
      this.$refs.registerRef.validate(valid => {
        if (valid) {
          //   alert('submit!')
          console.log(this.registerForm)
          this.$axios
            .post('/api/logAndReg/register', this.registerForm)
            .then(result => {
              console.log(result)

              this.$message({
                type: 'success',
                message: result.data.msg
              })
              this.activeName = '5'
              this.$router.push({ name: 'Login' })
            })
        } else {
          this.$message({
            type: 'error',
            message: '请按规定填写注册内容'
          })
          return false
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.registerForm.avater = ''
    },
    handlePreview(file) {
      console.log(file)
      this.imgUrl = file.url
      this.imgVisibel = true
    },
    seccessAfter(response, file, fileList) {
      const a = response.path.split('\\')
      this.registerForm.avater = 'http://localhost:5000/' + a[a.length - 1]
    }
  }
}
</script>
<style scoped>
.Register {
  height: 100%;
}
.top {
  width: 100%;
  height: 130px;
  background: #898988;
  overflow: hidden;
}
.topBanner {
  width: 1100px;
  height: 130px;
  margin: 0 auto;
}
.title {
  padding-left: 100px;
  font-size: 16px;
  color: azure;
  font-weight: 400;
  margin-bottom: 15px;
}
.el-card {
  margin-top: 5px;
}
.bod {
  width: 1100px;
  height: 100%;
  margin: 0 auto;
}
.upload {
  margin-top: 30px;
}
.projectCLA {
  margin-bottom: 10px;
}
.imgV {
  width: 100%;
}
</style>